import React, { Component } from 'react'
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'
import { onFn, offFn, getBoundingClientRect, deepCopy, indexObjectArr } from "@/assets/utils/utils"
import { historyChangeindex, historyChangeNav } from "@/action/index"
const mapStateToProps = (state, ownProps) => {
    return {
        ...state
    }
}

const mapDispatchToProps = (dispatch, props) => {
    return {
        setHistoryNavFn: (data) => {
            historyChangeNav(data)(dispatch)
        },
        setHistoryIndexFn: (data) => {
            historyChangeindex(data)(dispatch)
        }
    }
}

class HistoryNav extends Component {
    constructor(props) {
        super(props)
    }
    componentWillMount() {

        onFn(document.documentElement, "click", this.windowClick)
    }
    state = {
        downValue: {},
        position: {
            top: 0,
            left: 0,
            display: 'none',
        }
    }
    windowClick = (event) => {
        this.setState({
            position: {
                display: "none",
                left: 0,
                top: 0,
            }
        })
    }
    contextMenuFn = (item, event) => {
        let target = event.currentTarget, position = getBoundingClientRect(target)
        this.setState({
            downValue: deepCopy(item),
            position: {
                display: "block",
                left: position.left + "px",
                top: position.top + position.height + "px",
            }
        })
        // event.stopPropagation()
        event.preventDefault()
    }
    navClickFn = (item, event) => {
        let history_index = this.props.history_index,
            history_nav = this.props.history_nav;
        if (item.path != history_index.path) {
            this.props.setHistoryIndexFn(item)
            this.props.history.push(item.path)
        }
    }
    componentWillUnmount() {
        this.windowClick();
        offFn(document.documentElement, "click", this.windowClick)
    }
    closeFn = (index, event) => {
        let history_index = this.props.history_index,
            downValue = this.state.downValue,
            history_nav = deepCopy(this.props.history_nav),
            j = indexObjectArr(history_nav, downValue.path, 'path')
        switch (index) {
            case 1://关闭当前
                history_nav.splice(j - 1, 1);
                if (downValue.path == history_index.path) {
                    let new_history_index = history_nav[0];
                    this.props.setHistoryIndexFn(new_history_index);
                    this.props.history.push(new_history_index.path);
                }
                this.props.setHistoryNavFn(history_nav)
                break;
            case 2://关闭其他的
                this.props.setHistoryIndexFn(downValue);
                this.props.setHistoryNavFn([downValue]);
                this.props.history.push(downValue.path);
                break;
            case 3://关闭左边的
                history_nav.splice(0, j);
                if (indexObjectArr(history_nav, history_index.path, 'path') == -1) {
                    let new_history_index = history_nav[0];
                    this.props.setHistoryIndexFn(new_history_index);
                    this.props.history.push(new_history_index.path);
                }
                this.props.setHistoryNavFn(history_nav)
                break;
            case 4://关闭右边的
                history_nav.splice(j + 1, history_nav.length - j - 1);
                if (indexObjectArr(history_nav, history_index.path, 'path') == -1) {
                    let new_history_index = history_nav[0];
                    this.props.setHistoryIndexFn(new_history_index);
                    this.props.history.push(new_history_index.path);
                }
                this.props.setHistoryNavFn(history_nav)
                break;
            default:
                break;
        }
    }
    render() {
        const history_index = this.props.history_index,
            history_nav = this.props.history_nav;
        const liArr = () => {
            let arr = []
            for (let i = 0; i < history_nav.length; i++) {
                arr.push(<li onClick={this.navClickFn.bind(this, history_nav[i])} onContextMenu={this.contextMenuFn.bind(this, history_nav[i])} className={history_nav[i].path == history_index.path ? 'on' : ''} key={history_nav[i].path}>{history_nav[i].title}</li>)
            }
            return arr
        }

        return (
            <>
                <nav className="history_nav">
                    <ul className="clearfix">
                        {liArr()}
                    </ul>
                </nav>
                <div className="history_nav_down" style={this.state.position}>
                    <ul>
                        <li onClick={this.closeFn.bind(this, 1)}>关闭</li>
                        <li onClick={this.closeFn.bind(this, 2)}>关闭其他</li>
                        <li onClick={this.closeFn.bind(this, 3)}>关闭左边</li>
                        <li onClick={this.closeFn.bind(this, 4)}>关闭右面</li>
                    </ul>
                </div>
            </>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(HistoryNav))